<template>
    <div class="confirmOrder">
        <Navbar :back="true" title="确认订单" />
        <div class="confirmOrder__container">
            <div class="confirmOrder__address" v-if="!addr || addr === null" @click="pathTo">
                请选择收获地址
                <van-icon size="14" name="arrow" />
            </div>
            <div class="confirmOrder__address active" v-else @click="pathTo">
                <div>
                    <p>{{ addr.name }} {{ addr.phone }}</p>
                    <p>{{ addr.address }}</p>
                </div>

                <van-icon size="14" name="arrow" />
            </div>
            <div class="confirmOrder__message">
                <h3>订单详情</h3>
                <ul>
                    <CartItem v-for="(item, index) in filters" mode="pay" :key="item.id" v-model="filters[index]" />
                </ul>
            </div>
            <div class="shop-bag__control">
                <van-submit-bar class="shop-bag__bar" button-color="rgba(255, 205, 65,0.8)"
                    style="background-color: var(--background-color);color:var(--font-color)" :price="totalPrice"
                    button-text="提交订单" @submit="onSubmit">
                    <span>共{{ totalCount }}件商品</span>
                </van-submit-bar>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import Navbar from '@/components/Navbar.vue'
import CartItem from '../shopBag/components/CartItem.vue'
import type { ShopBagType } from "@/views/home/index.vue";
import { useShopBagStore } from "@/store";
import { storeToRefs } from "pinia";
import { computed, ref } from 'vue';
import { showConfirmDialog, showDialog } from "vant";
import { addLog, addRecords } from "@/api";
import dayjs from "dayjs";
import { useRouter, useRoute } from 'vue-router';
import "vant/es/dialog/style";
import { AddrItem } from '../address/index.vue';
const addr = ref<AddrItem | null>(null)
const router = useRouter()
const route = useRoute()
addr.value = route.query.item ? JSON.parse(route.query.item as string) : null
console.log(addr.value);
const store = useShopBagStore();
const { list } = storeToRefs(store);
const uid = JSON.parse(localStorage.getItem("userInfo")).id

const filters = computed(() =>
    list.value.filter((item: ShopBagType) => item.count > 0 && item.token === localStorage.getItem("token"))
);
const totalCount = computed(() =>
    filters.value.reduce((acc, cur) => acc + cur.count, 0)
);
const totalPrice = computed(
    () => filters.value.reduce((acc, cur) => acc + cur.price * cur.count, 0) * 100
);
const onSubmit = () => {
    if (addr.value === null || !addr.value) {
        showDialog({ title: '请先填写地址', confirmButtonColor: "#ffcd41" })
        return
    }
    const arr = filters.value.map(item => {
        return { id: item.id, count: item.count, name: item.name, desc: item.desc, price: item.price, discount: item.discount, img: item.img, originalPrice: item.originalPrice }
    })
    const ids = filters.value.map(item => {
        return item.id
    })
    showConfirmDialog({
        title: '提交订单',
        message: `确定要提交订单吗?`,
        confirmButtonColor: "#ffcd41",
    }).then(async () => {
        const [] = await Promise.all([addRecords({ ids }), addLog({ uid, gids: JSON.stringify(arr), total: totalPrice.value / 100, time: dayjs().format('YYYY-MM-DD HH:mm:ss'), address: JSON.stringify(addr.value) })])
        showDialog({ title: '提交成功', confirmButtonColor: "#ffcd41", }).then(() => {
            list.value = []
            router.replace('/shopBag')
        })
    }).catch(() => {
        // on cancel
    })
};
const pathTo = () => {
    router.replace({ path: "/address", query: { type: 1 } })
}
</script>
<style lang="scss">
.confirmOrder {
    height: 100vh;
    font-size: 16rem;
    color: var(--font-color);

    .van-submit-bar__bar {
        border-top: 1rem solid var(--border-color);
    }

    .van-submit-bar__price {
        color: rgba($color-yellow, 0.8);
    }

    &__container {
        height: calc(100vh - 77rem);
        background: var(--linear-gradient);
        box-sizing: border-box;
        padding: 0 20rem 60rem;
        overflow: scroll;
    }

    &__address {
        font-size: 18rem;
        margin-bottom: 20rem;
        width: 100%;
        @include flex(row, center, space-between);

        &.active {
            p:last-child {
                margin-top: 4rem;
                font-size: 14rem;
            }
        }
    }

    &__message {
        border: 4rem solid rgba($color: $color-yellow, $alpha: 0.3);
        padding: 10rem 10rem 0;
        border-radius: 10rem;

        >h3 {
            margin-bottom: 10rem;
            font-weight: 100;
            font-size: 18rem;
            color: $color-yellow;
        }
    }
}
</style>